<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./EventUtil.js"></script>
</head>
</style>

<body>
    <form action="#" id="myForm">
        <select name="selectBox1" id="selectBox1" style="width:200px;margin: 20px">
            <option value="value_1">文本_1</option>
            <option value="value_2">文本_2</option>
            <option value="value_3">文本_3</option>
            <option value="value_4">文本_4</option>
        </select>
        <button type="button" class="addOption">增加单选选择框选项</button>
        <button type="button" class="delOption">移除单选选择框选项</button>
        <button type="button" class="up">上移单选选择框选项</button>
        <button type="button" class="down">下移单选选择框选项</button>
        <button type="button" class="joinOther">加入多选框</button>
        <select name="selectBox2" id="selectBox2" multiple style="width:200px;margin: 20px;display: block;">
            <option value="value_1">文本_1</option>
            <option value="value_2">文本_2</option>
            <option value="value_3">文本_3</option>
            <option value="value_4">文本_4</option>
        </select>
        <button>提交</button>
    </form>
</body>
<script>
    window.onload = function () {
        var selectBox1 = document.getElementById("selectBox1");
        var selectBox2 = document.getElementById("selectBox2");
        var addButton = document.getElementsByClassName("addOption");
        var delButton = document.getElementsByClassName("delOption");
        var upButton = document.getElementsByClassName("up");
        var downButton = document.getElementsByClassName("down");
        var joinButton = document.getElementsByClassName("joinOther");
        (function () {
            selectBox1.onchange = function () {
                var selectedIndex = selectBox1.selectedIndex;
                var selectedOption = selectBox1.options[selectedIndex];
                console.log("选中项数据信息：" + "文本：" + selectedOption.text + ",value值：" + selectedOption.value +
                    ',索引：' + selectedOption.index + ',是否选中：' + selectedOption.selected)

                console.log("当前选择框中的值是：" + selectBox1.value)
                // 设置另外一个选中项
                //selectedOption.selected=false;
                //selectBox1.options[1].selected=true;
            }

            selectBox2.onchange = function () {
                var selectedOption = getSelectedOptions(selectBox2);
                selectedOption.map(function (option, index) {
                    console.log("选中项数据信息：" + "文本：" + option.text + ",value值：" + option.value +
                        ',索引：' + option.index + ',是否选中：' + option.selected)
                }) 
            }
            addButton[0].onclick = function () {
                addOption(selectBox1, "newValue", "新文本");
                var selectedIndex = selectBox1.selectedIndex;
                var newOption = selectBox1.options[selectedIndex];
                console.log("新增选项数据信息：" + "文本：" + newOption.text + ",value值：" + newOption.value + ',索引：' +
                    newOption.index + ',是否选中：' + newOption.selected)
            }

            delButton[0].onclick = function () {
                // 移除选择的选项
                if (selectBox1.options.length) {
                    removeOption(selectBox1, selectBox1.selectedIndex);
                }
            }
            upButton[0].onclick = function () {
                // 上移选择的选项
                if (selectBox1.options.length) {
                    upOption(selectBox1, selectBox1.selectedIndex);
                }
            }
            downButton[0].onclick = function () {
                // 下移选择的选项
                if (selectBox1.options.length) {
                    downOption(selectBox1, selectBox1.selectedIndex);
                }
            }

            joinButton[0].onclick = function () {
                // 加入选择的选项
                // 为appendChild()方法传入一个文档中已有的元素，那么就会先从元素的父节点中移除它，再把他添加到指定位置
                if (selectBox1.options.length) {
                    var option = selectBox1.options[selectBox1.selectedIndex];
                    joinOption(selectBox2, option);
                } else {
                    console.log("单选项已为空");
                }
            }

        })();

        // 取得给定选择框中选中项的一个数组 适用于单选和多选选择框
        function getSelectedOptions(selectBox) {
            var result = [];
            var option = null;

            for (var i = 0, len = selectBox.options.length; i < len; i++) {
                option = selectBox.options[i];
                if (option.selected) {
                    result.push(option);
                }
            }

            return result;
        }

        //添加选项
        function addOption(selectBox, value, text) {
            var newOption = document.createElement("option");

            // var textNode=document.createTextNode(text);
            // newOption.appendChild(textNode);
            newOption.text = text || value;

            // newOption.setAttribute("value",value);
            newOption.value = value || '';

            newOption.selected = true;
            selectBox.appendChild(newOption);
        }

        // 移除选项
        function removeOption(selectBox, removeIndex) {
            //selectBox.remove(removeIndex);
            //selectBox.options[removeIndex]=null;
            var delOption = selectBox.options[removeIndex];
            console.log("移除选项数据信息：" + "文本：" + delOption.text + ",value值：" + delOption.value + ',索引：' + delOption.index +
                ',是否选中：' + delOption.selected)
            selectBox.removeChild(delOption);
        }

        // 上移选项
        function upOption(selectBox, moveIndex) {
            // if(moveIndex<=0){
            //     console.log("第一个选项不能移动");
            //     return;
            // }
            var moveOption = selectBox.options[moveIndex];
            selectBox.insertBefore(moveOption, selectBox.options[moveIndex - 1]);
        }

        // 下移选项
        function downOption(selectBox, moveIndex) {
            var moveOption = selectBox.options[moveIndex];
            selectBox.insertBefore(moveOption, selectBox.options[moveIndex + 2]);
        }


        // 加入另一个选择框
        // 为appendChild()方法传入一个文档中已有的元素，那么就会先从元素的父节点中移除它，再把他添加到指定位置
        function joinOption(selectBox, moveOption) {
            selectBox.appendChild(moveOption);
        }
    }
</script>



</html>